

<script>
import { getStringSet, treeFilter } from "@utils/dataStruct";
import { getRouteItemByMenuItem } from "@utils/router";
import NavManager from "../topNav/navManager";
import { getTokenInfo, setSessionCookie, setSessionByRefreshTokenInfo } from "@utils/session";
export default {
    /* 侧边栏导航 */
    name: "leftNav",
    props: {
        showTab: Boolean,
    },
    data() {
        return {
            activeMenu: "main",
            menuFilterKeyWord: "",
            // isCollapse: false,
            navManager: new NavManager(this, {
                onUpdate: () => {
                    this.updateNavTabList();
                },
            }),
        };
    },
    computed: {
        menuMap() {
            return this.$store.state.account.menuMap || {};
        },
        menuList() {
            let keepMap = {};
            let out = treeFilter(
                this.$store.state.account.menuList || [],
                (item, parentArray) => {
                    if (
                        this.menuFilterKeyWord &&
                        !(item.children && item.children.length) &&
                        !item.name.includes(this.menuFilterKeyWord)
                    ) {
                        if (!parentArray.filter((v) => keepMap[v.key]).length) {
                            return false;
                        }
                    }

                    if (item.name.includes(this.menuFilterKeyWord)) {
                        keepMap[item.key] = true;
                    }

                    let itemSet = getStringSet(item.description);

                    if (itemSet.adminOnly && !this.isAdmin) {
                        return false;
                    }

                    if (itemSet.adminOnlyHide && this.isAdmin) {
                        return false;
                    }
                    if (itemSet.menuIconType) {
                        item.menuIconType = itemSet.menuIconType;
                    }
                    if (itemSet.frontName) {
                        item.frontName = itemSet.frontName;
                    }

                    return true;
                }
            );

            return out;
        },
        activePath() {
            return this.$store.state.account.activePath || [];
        },
        isCollapse: {
            get() {
                return this.showTab;
            },
            set(n) {
                this.$emit("updateShowTab", n);
            },
        },
    },
    watch: {
        activePath: {
            immediate: true,
            handler(n) {
                if (n && n.length) {
                    this.$nextTick(() => {
                        let index = n[n.length - 1].key;
                        this.activeMenu = index || "main";
                    });
                }
            },
        },
        menuList: {
            immediate: true,
            handler(n) {
                if (n) {
                    this.setMenuByRoute();
                }
            },
        },
        $route: {
            immediate: true,
            handler(n) {
                if (!n) return;
                this.setMenuByRoute();
            },
        },
    },
    render(h) {
        const getMenuList = (menuList) => {
            let menuListRender = (menuList || []).map((item) => {
                if (item.children && item.children.length) {
                    return (
                        <el-submenu index={item.key} title={item.name}>
                            <template slot="title">
                                <span slot="title">{item.name}</span>
                            </template>

                            {getMenuList(item.children)}
                        </el-submenu>
                    );
                } else {
                    return (
                        <el-menu-item index={item.key}>
                            <span slot="title">{item.name}</span>
                        </el-menu-item>
                    );
                }
            });
            return menuListRender;
        };

        return (
            <div class="h-100 w-100 left_wrapper ">
                <div
                    class="coll_tag"
                    on-click={() => {
                        this.isCollapse = !this.isCollapse;
                    }}
                    style="cursor: pointer;"
                >
                    {this.isCollapse ? (
                        <i class="el-icon-d-arrow-left" />
                    ) : (
                        <i class="el-icon-d-arrow-right" />
                    )}
                </div>
                <div class="h-100 w-100 light-little-scroll">
                    <el-input
                        value={this.menuFilterKeyWord}
                        class="m-4"
                        style="width: auto"
                        size="small"
                        placeholder="输入筛选菜单"
                        clearable
                        on-input={(v) => {
                            this.menuFilterKeyWord = v;
                        }}
                    ></el-input>

                    <el-menu
                        ref="menu"
                        default-active={this.activeMenu}
                        class="el-menu-vertical-demo"
                        background-color="#3F4A55"
                        text-color="#fff"
                        active-text-color="#fff"
                        unique-opened={true}
                        on-select={this.handleSelect}
                        on-close={this.handleClose}
                    >
                        {getMenuList(this.menuList)}
                    </el-menu>
                    <div style="height: 20px;"></div>
                </div>
            </div>
        );
    },
    methods: {
        setMenuByRoute() {
            this.$store.dispatch("account/setMenuByRoute", this.$route);
        },
        handleSelect(index, indexPath) {
            let active = null;

            // if (index === this.homePage.key) {
            //     active = this.homePage;
            // } else {
            //     active = this.menuMap[index];
            // }
            active = this.menuMap[index];

            if (active) {
                let routeSet = getRouteItemByMenuItem(active);

                if (routeSet.name === "iframe") {
                    const { path, moduleName, iframeUrl } = this.$route.query || {};

                    // if(moduleName) {
                    //     if(iframeUrl === active.iframeUrl) {
                    //         return;
                    //     }
                    // }else 
                    if (path === active.path) {
                        return;
                    }
                } else if (this.$route.name === routeSet.name) {
                    return;
                }
                this.navManager.jumpTo(routeSet);
            }
        },
        handleClose() {},
        removeRoute(fullPath) {
            this.navManager.removeItem(fullPath);
        },
        pushRoute(routeSet) {
            this.navManager.jumpTo(routeSet);
        },
        removeAll() {
            this.navManager.removeAll();
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@assets/variables.scss";
.left_wrapper {
    background-color: $--background-color-opcity;
    position: relative;
}
.coll_tag {
    z-index: 999;
    position: absolute;
    background: $--color-primary;
    width: 15px;
    height: 40px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    top: 50%;
    right: -15px;
    line-height: 40px;
    color: #fff;
}
.left_wrapper {
    ::v-deep {
        .el-menu {
            color: #fff;
            font-weight: bold;
            border-right: solid 1px rgba(0, 0, 0, 0);
        }
        .el-submenu__icon-arrow {
            color: #fff;
        }
        .el-menu-item.is-active {
            background-color: $--color-primary !important;
        }
        .el-menu-item {
            height: 36px;
            line-height: 36px;
        }
        .el-submenu__title {
            height: 36px;
            line-height: 36px;
        }
    }
}
</style>